import {React,useState } from 'react'
import { Button, Layout, Table, Modal, Input } from 'antd'
import './ReSetPassword.css'
import {
    EyeInvisibleOutlined, EyeTwoTone 
  } from '@ant-design/icons';
import { useSearchParams } from 'react-router-dom';
import {ApiService } from '../common/ApiService'
const { Content } = Layout;

const ReSetPassword = () => {
    const contentStyle = {
        textAlign: 'center',
        color: '#fff',
        backgroundColor: '#141E20',
        display: 'flex',
        justifyContent:'center',
        alignItems: 'center',
        backgroundImage: "URL('../../public/images/rspEmailBg.png')",
        backgroundSize: 'contail',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center'
      };
      const layoutStyle = {
        width: '100%',
        maxWidth: '100%',
        minHeight: '100vh'
      };
      const [searchParams, setSearchParams] = useSearchParams();
      const token = searchParams.get('token');
      const [pwd, setPwd] = useState({ password: '' });
      const [error, setError] = useState(null);
      localStorage.setItem('token', token);
      const handlUpdatePassword = async (e) => {
        e.preventDefault();
        try {
            var response = await ApiService.changePwd(pwd);
            if (response.code === 0) {
                setPwd({ password: '' });
                localStorage.removeItem('token');
                // location.href = '/Login';
                alert('Success,Please go to login!');
            } else {
                alert(response.message)
            }
        } catch (err) {
            setError(err.message);
        }
    };
    return(
        <>
        <Layout style={layoutStyle}>
            <Content style={contentStyle}>
                <img className='relogo' src='../../public/images/LOGO1.svg' />
                <div className='setpassword'>
                    <div className='title'>
                    Change Password
                    </div>
                    <div className='subTxt'>New Password</div>
                    <Input.Password style={{
                        width: 440,
                        height: 50,
                        borderRadius: 30,
                        marginTop: 12,
                        backgroundColor: '#141E20',
                        color:"#fff"
                    }} iconRender={visible => (visible ? <EyeTwoTone twoToneColor='#31F045' /> : <EyeInvisibleOutlined style={{color:'#31F045'}} />)}
                    value={pwd.password} onChange={(e) => setPwd({...pwd, password: e.target.value})}>
                    </Input.Password>
                    <div className='tips'>
                        <div style={{paddingRight: '5px'}}>Password</div>
                        <img src='../../public/images/exclamation1.svg' />
                        <div>At least eight characters, one uppercase, one lowercase,a number and a special character.</div>
                    </div>
                    <div className='btn'>
                        <Button style={{
                            width: 200,
                            height: 45,
                            borderRadius: 30,
                            backgroundColor: '#31F045',
                            color: '#000',
                            fontSize: 16,
                            border: 'none'
                        }} onClick={handlUpdatePassword}>Update Password</Button>
                    </div>
                    <div className='goLogin'>
                        <a href='/Login'>Back to Login</a>
                    </div>
                </div>
                <div className='rerobot'>
                    <img src='../../public/images/minRobot.svg' />
                </div>
            </Content>
        </Layout>
        </>
    )
}
export default  ReSetPassword